<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title></title>
</head>
<style>
.td_f{

 float: left;
 margin: 5px 19% 7px 24%;

}
.tr_f{
 border: 1px solid;

}


</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<body>
<?php //echo form_open('');?>
<table id="animales" style="border: 1px solid;  width: 100%; ">

<tr>
<td  colspan="2" align="center"><h1>Simulador Costo Segan</h1></td>
</tr>
 <!-- tr datos Generales -->
<tr style=" border: 1px solid; width: 88%;margin-bottom: 16px;">
<td >
<h2 style=" margin-left: 30%; width: 100%">Antecedentes para la Cotizaci&oacute;n</h2>
<h3>&nbsp;&nbsp;&nbsp;&nbsp;Tipo de explotacion ganadera:&nbsp;&nbsp;
<select name="ganaderia" id="ganaderia"  size="1" onchange="tipo(this.value)">
<option value="0">Seleccionar</option>
<option value="Confinamiento">Confinamiento</option>
<option value="Pastoreo">Pastoreo</option>
</select></h3>
<input type="hidden" name="explotacion" value="" id="explotacion" />
</td>
</tr>

<!-- tr categorias animal -->
<tr style="border: 1px solid; width: 100%; background-color: #AAAAAA">
<td style="float: left; width: 16%;border: 1px solid;"><center><b>T.E. Ganancia</b></center></td>
<td style="float: left; width: 16%;border: 1px solid;"><center><b>Sexo</b></center></td>
<td style="float: left; width: 16%;border: 1px solid;"><center><b>Tipo</b></center></td>
<td style="float: left; width: 16%;border: 1px solid;"><center><b>Cantidad</b></center></td>
<td style="float: left; width: 16.5%;border: 1px solid;"><center><b>Precio</b></center></td>
<td style="float: left; width: 10%;border: 1px solid;"><center><b>Otro</b></center></td>
<td style="float: left; width: 6%;border: 1px solid;"><center><b>Quitar</b></center></td>
</tr>

<tr style="border: 1px solid; width: 88%;">
<td style="float: left; width: 16%;border: 1px solid; height: 22px;">
<select name="ganacia_[]" id="ganancia_1" class="selectGan"  size="1">
<option value="0">Seleccionar</option>
<option value="Confinamiento">Confinamiento</option>
<option value="Pastoreo">Pastoreo</option>
</select>
</td>
<td style="float: left; width: 16%;border: 1px solid;height: 22px; ">
<select style=" margin-left: 30px" name="sexo_[]" size="1" >
<option value="0">Seleccionar</option>
<option value="1">Macho</option>
<option value="2">Hembra</option>
</select>
</td>
<td style="float: left; width: 16%;border: 1px solid;height: 22px;">
<select style=" margin-left: 30px" name="tipo_[]" size="1" size="5">
<option value="0">Seleccionar</option>
<option value="1">tipo</option>
</select></td>
<td style="float: left; width: 16%;border: 1px solid;"><input name="cant_[]" size="19" /></td>
<td style="float: left; width: 16.5%;border: 1px solid;height: 22px;">
<select name="precio_[]" size="1" style=" margin-left: 30px"  tabindex="1" onchange="texto(this.value,'1')">
<option  value="0" >Seleccionar</option>
<option value="2">Maximo</option>
<option value="3">Minimo</option>
<option value="4">Promedio</option>
<option value="5">Otro</option>
</select></td>
<td style="float: left;width: 10%; border: 1px solid;height: 22px;  "><input name="otro_[]" class="onlyNumeric" id="otro_1" size="9"  style="display: none"/></td>
</tr>


</table>

<div style="width: 19.5%;float: right;  margin-right: 36%;"><input type="button" name="guardar" value="Ingresar" /></div>
<div style="float: left;margin-left: 17%; width: 88%"><h3><img src="img/mas.jpg" width="30" height="30" alt="" onclick="agregarmas()" />Agregar Mas Animales</h3></div>


</body>
<script>
 function texto(obj,n){
if(obj == 5){
 $("#otro_"+n).show();
}else{
  $("#otro_"+n).hide();
}
}

function onlyNumeric(){

    $(".onlyNumeric").keydown(function(event){

       if ( event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 13 || event.keyCode == 27 || event.keyCode == 46 || (event.keyCode >= 35 && event.keyCode <= 39) ) {
            return;
        }else if (!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) {
            return false;
        }

    });

}

function agregarmas(){
      var numeroTDs = $('#animales >tbody >tr').length;
  var html=selecCrear(nuevoTD, $("#explotacion").val());
  var nuevoTD = '<tr id="tr_'+(numeroTDs-2)+'" style="float: left; border: 1px solid; width: 100%;">';
  var onclick =  "$('#tr_"+(numeroTDs - 2)+"').remove()";
  nuevoTD +='<td style="float: left; width: 16%;border: 1px solid; height: 22px;">'+html+'   </td>';
  nuevoTD += '<td style="float: left; width: 16%;border: 1px solid; height: 22px; "> <select style=" margin-left: 30px" name="sexo_[]" size="1" >';
  nuevoTD+=' <option value="0">Seleccionar</option><option value="1">Macho</option> <option value="2">Hembra</option> </select> </td> ';
  nuevoTD+='<td style="float: left; width: 16%;border: 1px solid; height: 22px;"><select style=" margin-left: 30px" name="tipo_[]" size="1" size="5"><option value="0">Seleccionar</option><option value="1">tipo</option></select></td>';
  nuevoTD+='<td style="float: left; width: 16%;border: 1px solid; height: 22px;"><input name="cant_[]" size="19" /></td>';
  nuevoTD+='<td style="float: left; width: 16.5%;border: 1px solid; height: 22px;"><select name="precio_[]" size="1" style=" margin-left: 30px"  tabindex='+(numeroTDs - 2)+' onchange="texto(this.value,'+(numeroTDs - 2)+')">';
  nuevoTD+='<option value="0">Seleccionar</option> <option value="2">Maximo</option><option value="3">Minimo</option><option value="4">Promedio</option><option value="5">Otro</option></select>  </td>';
  nuevoTD+='<td style="float: left; width: 10%;border: 1px solid; height: 22px;"><input name="otro_[]" class="onlyNumeric" id="otro_'+(numeroTDs - 2)+'" size="9"  style="display: none"  />&nbsp;&nbsp;</td>';
  nuevoTD +='<td style="float: left;width: 6.3%;"><input value="X" type="button" onclick="'+onclick+'" ></td>';
  nuevoTD += '</tr>';

  $("#animales").append(nuevoTD);
  onlyNumeric();
}

function  remove(){
  ("#").remove();
}

function tipo(obj){
 $("#explotacion").val(obj);
 var  i=1;
 $(".selectGan").each(function(){
    $("#ganancia_"+i+" option[value="+$("#explotacion").val()+"]").attr("selected",true);
    i++;
 });

}

function selecCrear(num,valor){
  var html="";
  var select='selected="selected"';
  var sel="";

  html+='<select name="ganacia_[]" id="ganancia_'+(num)+'" class="selectGan"  size="1">';

  if(valor == 0 ){sel=select;}else{ sel='';}
  html+='<option '+sel+' value="0">Seleccionar</option>';

 if(valor == "Confinamiento" ){sel=select;}else{ sel='';}
  html+='<option '+sel+' value="Confinamiento">Confinamiento</option>';
  if(valor == "Pastoreo" ){sel=select;}else{ sel='';}
  html+='<option '+sel+' value="Pastoreo">Pastoreo</option>';

  html+='</select>';

  return html;

}

</script>
</html>
